{% extends "single.html" %}
{% block scripts %}
  <script type="application/javascript" src="{{ STATIC_URL }}js/category.js"></script>
{% endblock %}
{% block title %} home {% endblock %}
{% block navpath %}

  <div class="page-header">
    <h1><small>我的地址</small></h1>
  </div>
{% endblock %}
{% block main %}
  <div class="col-xs-12 col-sm-6 col-md-12">
    <p class="navbar-text navbar-right">
      <a href="{% url "contactkeeper-add" %}" type="button" class="btn btn-success">新建</a>
      <a href="" type="button" class="btn btn-info">管理</a>
    </p>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-12">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>

      <!-- Table -->
      <table class="table table-hover table-responsive">
        <tr>
          <th>id</th><th>类别</th><th>姓名</th><th>国家</th><th>详细地址</th><th>邮编</th><th>手机号</th><th>电子邮件</th><th>状态</th>
        </tr>
        <tbody>
          {% for contactmanager in contactmanagers %}
          <tr>
            <td><a href="">{{ contactmanager.id }}</a></td>
            <td>{{ contactmanager.category.name }}</td>
            <td>{{ contactmanager.contact.name }}</td>
            <td>{{ contactmanager.contact.country }}</td>
            <td>{{ contactmanager.contact.province }} {{ contactmanager.contact.city }} {{ contactmanager.contact.district }} {{ contactmanager.contact.street }}</td>
            <td>{{ contactmanager.contact.postcode }}</td>
            <td>{{ contactmanager.contact.phone }}</td>
            <td>{{ contactmanager.contact.email }}</td>
            <td>{{ contactmanager.status }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    </div>



  <div class="col-xs-12 col-sm-6 col-md-8">
    {% if is_paginated %}
    <div class="col-xs-12 col-sm-6 col-md-10">
      <ul class="pagination pagination-centered">
        {% if page_obj.has_previous %}
          <li><a href="?page=1"><<</a></li>
          <li><a href="?page={{ page_obj.previous_page_number }}"><</a></li>
        {% endif %}

        {% for i in paginator.page_range %}
           <li {% if page_obj.number == i %} class="active" {% endif %}><a href="?page={{i}}">{{i}}</a></li>
        {% endfor %}

        {% if page_obj.has_next %}
          <li><a href="?page={{ page_obj.next_page_number }}">></a></li>
          <li><a href="?page={{ page_obj.paginator.num_pages }}">>></a></li>
        {% endif %}
      </ul>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
      <form action="." method="get" id="paginate-by-form">
        <select name="paginate_by" class="form-control" id="paginate-by">
          <option>10</option>
          <option>20</option>
          <option>30</option>
        </select>
      </form>
    </div>
    {% endif %}
  </div>
{% endblock %}

{% block aside %}
aside
{% endblock %}